<template>
    <div class="main-container">
        <!-- 顶部的自定义菜单栏 -->
        <!-- <div class="custom-drag-menu"> -->
        <el-text class="mx-1" type="primary">下载进度 {{ appDownLoadPercent }}</el-text>
        <el-progress :percentage="appDownLoadPercent" />
        <el-button type="primary" @click.stop="down">点击下载</el-button>
        <el-text class="mx-1" type="primary"></el-text>
        <!-- <div class="demo" @click.stop @dblclick.stop></div>
        </div> -->
        <!-- 页面主要的内容 -->
        <div class="main-view">
            <RouterView />
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { RouterView } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAppState } from '@renderer/stores/app-state.js'
import { useAppUpdater } from '@renderer/stores/app-updater.js'
// 获取当前窗口的状态
// const { currentScreenisTop, currentScreenisMax, currentScreenisFull } = storeToRefs(useAppState())
// 进度
const { appDownLoadPercent } = storeToRefs(useAppUpdater())
onMounted(() => {
    useAppState().watchSreenState() // 执行窗口状态监听
    useAppUpdater().queryAvailableVersion() // 执行更新监听事件
})
onUnmounted(() => {
    // 窗口卸载时移除所有的监听事件 --- 不可删除
    window.electron.ipcRenderer.removeAllListeners()
})

const down = () => {
    useAppUpdater().downloadApp()
}
</script>

<style lang="scss">
@import '@renderer/assets/css/styles.scss';
.main-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.custom-drag-menu {
    background-color: #333;
    height: 30px; /* 设置菜单栏高度 */
    -webkit-app-region: drag; /* 允许区域拖拽 */
}

.main-view {
    padding: 40px;
    width: auto;
    height: calc(100vh - 30px);
}
</style>
